<template>
	<div class="app-menu-contains">
		<a-spin :spinning="loading" style="height: 100%;">
			<div class="application-content h100">
				<div class="application-input-wrapper">
					<el-input @input="applicationQueryChange" v-model="colectQuery" @focus="ipt_focus" @blur="ipt_blur1"  size="small"
						clearable class="mb10" ></el-input>
					<div class="ipt_focus_box" v-show="show">
						<div class="ipt_focus">
							<div class="empty" v-if="list.length>0">
								<span>搜索记录</span>
								<span class="qk hand" @click="empty">清空</span>
							</div>
							<div class="list_box">
								<div v-if="list.length==0" class="record">
									暂无记录
								</div>
								<div class="li" v-for="item in list" :key='item.id' v-if="list.length>0" @click.stop="list_btn(item.content)">
									<span>{{item.content}}</span>
									<i class="el-icon-error hand" @click.stop="btn_delete(item.id)"></i>
								</div>
							</div>
							<div class="up hand" @click="ipt_blur">
								收起<i class="el-icon-arrow-down"></i>
							</div>
						</div>
					</div>
				</div>
				<div class="application-nemu-wrapper">
					<div class="application-left-menu theme-less-background-color">
						<span class="menu-item"
							:class="applicationIndex === index ? 'active theme-less-font-color' : ''"
							v-for="(item, index) in applicationList" @click="changeApplicationMenu(index)"
							:key="'menu-icon' + index" >{{ item.menuName }} ({{ item.children.length }})
							</span>
					</div>
					<div class="application-child-box">
						<draggable v-show="applicationChild.length" style="height: 100%;z-index: 1;"
							v-model="applicationChild" v-bind="{
                ...dragOptions,
                targetName: 'appMenu'
              }" :disabled="!setting" @start="startDraggable">
							<div :class="['application-child-item'].join(' ')" v-for="(item, index) in applicationChild"
								:key="item.receptionApplyId + 'item' + index">
								<div :class="['right-child-item', setting ? 'draggable-move-clazz' : ''].join(' ')"
									@click="!setting && goApp(item)">
									<i :class="
                      [
                        'theme-less-background-color',
                        'icon_iconfont',
                        item.icon && item.icon !== '#' ? icon.icon : 'el-icon-picture-outline'
                      ].join(' ')
                    "></i>
									<span class="child-text" @click="url_btn(item.isFrame,item.path)">{{ item.menuName }}</span>
								</div>
								<div style="width: 10%;text-align: right;">
									<el-tooltip placement="top" :content="item.applyType == 1 ? '取消收藏' : '收藏'">
										<a-icon type="heart" style="font-size: 19px;line-height: 30px;"
											class="theme-less-font-color"
											:theme="item.applyType == 1 ? 'filled' : 'outlined'"
											@click="!setting && addToFavorite(item)" />
									</el-tooltip>
								</div>
							</div>
						</draggable>
						<a-empty v-show="!applicationChild.length" description="暂未查找到应用" />
					</div>
				</div>
			</div>
		</a-spin>
	</div>
</template>

<script>
	import debounce from 'lodash/debounce'
	import {
		treeselect,
		appList,
		collectionUserApply,
		treeselect2,
		list,
		deleteId,
		deleteUserId
	} from '@client/addHome/service'
	export default {
		name: 'UseAppMenu',
		data() {
			return {
				loading: false,
				itemDraggable: false,
				applicationIndex: 0,
				colectQuery: '',
				dragOptions: {
					animation: 200,
					ghostClass: 'ghost',
					group: {
						name: 'app',
						pull: 'clone'
					}
				},
				// 可用应用列表
				applicationList: [],
				applicationChild: [], // 当前显示的可用应用列表
				list: [],
				show: false,
				keyword:""
			}
		},
		props: {
			setting: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			startDraggable(e) {
				// 反馈被拖动的应用
				this.$store.dispatch('app/setDraggableObj', this.applicationChild[e['oldIndex']] || {})
			},
			goApp(item) {
				console.log(item)
				// if(item.isFrame==0){
				// 	 location.href = item.path
				// }
			},
			// 添加/取消 进我的收藏
			addToFavorite(object) {
				const result = this.$httpHandler(collectionUserApply, {
					applyType: Number(object.applyType) === 1 ? 2 : 1,
					receptionApplyId: object.receptionApplyId
				})
				if (result) {
					this.$set(object, 'applyType', Number(object.applyType) === 1 ? 2 : 1)
				}
			},
			changeApplicationMenu(index) {
				if (index === this.applicationIndex) return
				this.applicationIndex = index
				this.applicationChild = this.applicationList[index]['children'] || []
			},
			// 可用列表查询
			applicationQueryChange(val) {
				this.keyword = val.trim()
				//debounce()
				treeselect2(this.keyword).then(res => {
					if (res.code == 200) {
						this.applicationList = res.data
						this.applicationChild = res.data[0]['children'] || []
					}
				})
				this.ipt_focus()

			},
			notify() {
				this.$httpResultHandler(treeselect).then(res => {
					this.applicationList = res.data
					this.applicationChild = res.data[0]['children'] || []
				})
			},
			/* 获取焦点 */
			ipt_focus() {
				list().then(res => {
					if (res.code == 200) {
						this.list = res.data
						this.show = true

					}
				})


			},
			ipt_blur() {
				this.show = false
			},
			ipt_blur1(){
				let _this=this
				setTimeout(()=>{
					_this.show=false
				},100)
			},
			/* 删除 */
			btn_delete(id) {
				deleteId(id).then(res => {
					if (res.code == 200) {
						this.list.forEach((a, b) => {
							if (a.id == id) {
								this.list.splice(b, 1)
								list().then(res => {
									if (res.code == 200) {
										this.list = res.data
										//this.show = true
								
									}
								})
							}
						})
					}
				})
			
			},
			/* 清空 */
			empty() {
				deleteUserId().then(res => {
					if (res.code == 200) {
						this.show = true
						this.list = []
					}
				})
			},
			url_btn(status,url){
				// console.log(status)
				// console.log(url)
			},
			list_btn(txt){
				this.colectQuery=txt
				this.keyword =txt
				//debounce()
				treeselect2(this.keyword).then(res => {
					if (res.code == 200) {
						this.applicationList = res.data
						this.applicationChild = res.data[0]['children'] || []
					}
					
				})
				this.show=false
			}
		}
	}
</script>

<style scoped lang="scss">
	.icon_iconfont {
		display: inline-block;
		width: 30px;
		height: 30px;
		line-height: 30px;
		font-size: 20px;
		margin-right: 5px;
		color: #fff;
		text-align: center;
		border-radius: 50%;
		background-color: #3672fe;
	}

	.app-menu-contains {
		width: 100%;
		height: 100%;

		::v-deep .ant-spin-container {
			height: 100%;
		}
	}

	.application-content {
		display: flex;
		flex-direction: column;

		.application-input-wrapper {
			padding: 0 15px;
			position: relative;
		}

		.application-nemu-wrapper {
			display: flex;
			height: 100%;

			.application-left-menu {
				width: 160px;
				border-top-right-radius: 6px;
				opacity: 0.7;
				padding: 10px 0px;
				user-select: none;
				box-sizing: border-box;

				&>span {
					display: inline-block;
					width: 100%;
					font-size: 16px;
					box-sizing: border-box;
					padding: 0px 10px;
					color: #fff;
					line-height: 40px;
					cursor: pointer;

					&.active {
						background: #fff;
						opacity: 0.8;
					}
				}
			}

			.application-child-box {
				flex: 1;
				width: 100%;

				user-select: none;
				padding: 10px;

				.application-child-item {
					display: inline-block;
					font-size: 14px;
					width: 100%;
					color: #333;
					line-height: 35px;
					display: flex;

					// justify-content: space-between;
					.child-icon::before {
						margin-right: 10px;
						padding: 2px;
						background: #3672fe;
						opacity: 0.7;
						color: #fff;
					}

					.child-text {
						flex: 1;
						width: 100%;
					}

					.child-favorite {
						cursor: pointer;
					}
				}
			}
		}

		&>.el-tabs {
			flex: 1;
			height: 100%;

			::v-deep &>.el-tabs__header {
				background-color: rgba(32, 58, 137, 0.8);
				text-align: left;

				.el-tabs__nav {
					.el-tabs__active-bar {
						display: none;
					}

					.el-tabs__item {
						color: #fff;
						text-align: left;
						padding: 0 10px;
						width: 160px;

						&.is-active {
							color: #777;
						}
					}
				}
			}

			::v-deep &>.el-tabs__content {
				height: 100%;
			}
		}
	}

	.right-child-item {
		cursor: pointer;
		width: 90%;
		height: 100%;

		&:active {
			background-color: rgba(255, 255, 255, 0.6);
		}
	}

	.ipt_focus_box {
		position: absolute;
		height: 160px;
		width: 100%;
		left: 0;
		top: 32px;
		z-index: 999;
		padding: 0 16px;

		.ipt_focus {
			width: 100%;
			height: 100%;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			border-radius: 0 0 5px 5px;

			.list_box {
				display: flex;
				flex-direction: column;
				padding: 5px 10px;

				.li {
					display: flex;
					justify-content: space-between;
					padding: 5px 0;
					font-size: 14px;
					cursor: pointer;

				}
			}

			.empty {
				display: flex;
				justify-content: space-between;
				padding: 10px;
				font-size: 14px;
				cursor: pointer;
			}
		}

		.record {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			margin-top: 50px;
		}

		.up {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;

			i {
				margin-left: 5px;
				font-size: 14px;
			}
		}

		.qk {
			background-color: #f4f4f5;
			color: #909399;
			font-size: 12px;
			padding: 0 5px;
			border-radius: 3px;
		}

		.hand {
			cursor: pointer;
		}
	}
</style>
